<template>
  <el-form
      ref="ruleFormRef"
      :label-width="$attrs?.inline?'auto':'120px'"
      v-bind="$attrs"
      :model="form"
      status-icon
  >
    <template v-for="it in props.formData">
      <el-form-item v-bind="it">
        <component :is="it.tag" v-bind="it.bind" v-model="form[it.prop]" :placeholder="it?.placeholder ?it.placeholder:'请输入'"></component>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">
        确定
      </el-button>
      <el-button @click="resetForm()">重置</el-button>
      <slot name="footer"/>
    </el-form-item>
  </el-form>
  <slot name="btns"/>
</template>

<script setup>

const props = defineProps({
  formData:{
    type:Array,
    default: []
  },
  form:{
    type:Object,
    default:{}
  }
})

const emits = defineEmits(['submit'])
const form = ref({});
watch(()=>props.form,val=>{
  form.value = val;
})

const ruleFormRef = ref();
const submitForm = ()=>{
  console.log('form',form)
  ruleFormRef.value.validate((valid, fields) => {
    if (!valid) return
    emits('submit',form.value);
  })
}

const resetForm = ()=>{
  ruleFormRef.value.resetFields()
}
</script>

<style scoped>

</style>